<template>
	<div class="video">
		<!-- 视频工具 -->
		<div class="video_tools">
			<div class="video_tools_btn">
				<el-input placeholder="搜索视频资源" class="input-with-select" v-model="filterText">
					<el-button slot="append" icon="el-icon-search" @click="getFilter"></el-button>
				</el-input>
			</div>

			<div class="video_tools_list">
				<div class="head">
					<span>视频列表</span>
				</div>

				<div class="item">
					<el-collapse v-model="activeNames">
						<el-collapse-item title="视频列表1" name="1">
							<div class="item_video">
								<el-checkbox-group v-model="checkList">
									<el-checkbox label="1">视频1</el-checkbox>
									<el-checkbox label="2">视频2</el-checkbox>
									<el-checkbox label="3">视频3</el-checkbox>
								</el-checkbox-group>
							</div>
						</el-collapse-item>
					</el-collapse>
				</div>

				<div class="control">
					<div class="head mt10"><span>画面控制</span></div>

					<div class="tool">
						<div class="tool_handle"></div>
						<div class="tool_frame_tab">
							<el-radio-group v-model="switchName" @change="switchFrame">
								<div class="df jfsb">
									<el-radio-button label="4">四画面</el-radio-button>
									<el-radio-button label="9">九画面</el-radio-button>
								</div>
							</el-radio-group>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 视频画面 -->
		<div class="video_video">
			<div class="video_video_content">
				<div
					:class="frame9"
					class="video_video_content_item"
					v-for="(item, index) in videoList"
					:key="index"
				>
					<div class="title">
						<div class="left">窗口 {{ index + 1 }}</div>
						<div class="right"></div>
					</div>
					<div class="frame">
						<div class="video" v-if="item.hasVideo">
							<video-player
								ref="videoPlayer"
								class="video-player vjs-custom-skin"
								:playsinline="true"
								:options="playerOptions[index]"
							/>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import 'videojs-contrib-hls';

export default {
	name: 'Video',
	data() {
		return {
			filterText: '',
			videoList: [
				{ hasVideo: false },
				{ hasVideo: false },
				{ hasVideo: false },
				{ hasVideo: false }
			],
			activeNames: ['1'],
			checkList: ['1'],
			switchName: '4',
			frame9: '',
			playerOptions: []
		};
	},
	mounted() {
		this.init();
	},
	computed: {},
	methods: {
		// 初始化
		async init() {
			this.getDeviceList();
		},

		// 获取视频资源列表
		async getDeviceList() {},

		// 获取视频资源列表
		async getVideoD(id) {
			return getVideoApi({}, id);
		},

		// 切换画面
		switchFrame(index) {
			if (index == 4) {
				this.frame9 = '';
				this.videoList = [
					{ hasVideo: false },
					{ hasVideo: false },
					{ hasVideo: false },
					{ hasVideo: false }
				];
			} else {
				this.frame9 = 'frame9';
				this.videoList = [
					{ hasVideo: false },
					{ hasVideo: false },
					{ hasVideo: false },
					{ hasVideo: false },
					{ hasVideo: false },
					{ hasVideo: false },
					{ hasVideo: false },
					{ hasVideo: false },
					{ hasVideo: false }
				];
			}
		},

		// 筛选
		getFilter() {}
	}
};
</script>

<style lang="scss" scoped>
.video {
	box-sizing: border-box;
	display: flex;
	height: calc(100vh - 120px);
	padding: 5px;

	.video_tools {
		box-sizing: border-box;
		height: 100%;
		width: 275px;
		min-width: 275px;
		border-top: 1px solid #e6e6e6;
		border-radius: 5px;
		box-shadow: 0 3px 5px rgba($color: #000, $alpha: 0.2);
		margin-right: 20px;
		padding: 20px 15px;
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: auto;
		@include xy-scroll;

		.video_tools_list {
			margin-top: 20px;
			flex: 1;
			display: flex;
			flex-direction: column;

			.head {
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 10px;

				span {
					color: #666666;
					font-weight: bold;
				}
			}

			.item {
				flex: 1;
				overflow: auto;
				min-height: 400px;
				@include xy-scroll;

				button {
					padding: 0;
					position: absolute;
					right: 0;
					top: 10px;
				}
			}

			.control {
				height: 86px;
			}
		}
	}

	.video_video {
		width: 1000px;
		height: 100%;
		min-width: 1000px;
		overflow: auto;
		@include xy-hidden-scroll;

		.video_video_content {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			flex-wrap: wrap;

			.video_video_content_item {
				transition: all 0.3s;
				margin: 0 25px;
				width: 400px;
				height: 300px;
				border-top: 1px solid #e6e6e6;
				border-radius: 5px;
				box-shadow: 0 3px 5px rgba($color: #000, $alpha: 0.2);

				.title {
					margin-top: 1px;
					font-size: 14px;
					border-bottom: 1px solid #c6c6c6;
					display: flex;
					justify-content: space-between;
					padding: 10px 15px;
					background-color: #f5f5f5;
				}

				.frame {
					height: 260px;
					width: 100%;
				}
			}
		}
	}

	.frame9 {
		width: 262px !important;
		height: 186px !important;

		.frame {
			height: 140px !important;
			width: 100%;
		}
	}
}
</style>

<style lang="scss">
.video {
	.el-checkbox {
		display: block;
		padding: 5px 0;
		margin: 0;
		position: relative;
	}

	.el-collapse-item__header {
		font-size: 12px;
		color: #757575;
	}

	.el-radio-group {
		width: 100%;
	}

	.el-radio-button__inner {
		width: 100px !important;
		border: 1px solid #dcdcdc;
		border-radius: 0 !important;
	}

	.tool_frame_tab {
		.el-radio-button__inner {
			width: 125px !important;
		}
	}

	.el-checkbox.is-checked {
		i,
		span {
			color: #0099cc !important;
		}
	}

	.el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #0099cc !important;
		border-color: #0099cc !important;
	}

	.frame {
		.vjs-fluid {
			padding-top: 61% !important;
		}

		video {
			height: 100%;
		}
	}

	.frame9 {
		.vjs-fluid {
			padding-top: 55% !important;
		}

		video {
			height: 100%;
		}
	}
}
</style>
